<script setup lang='ts'>
import { onMounted, reactive, ref, provide } from 'vue';
import { guild_roomApi } from '@/api/controller';
import {Toastloading, ToastSuccess} from '@/utils/public';
import Pagination from "@/components/Pagination/index.vue";
import xmImage from '@/components/xmImage/index.vue';
import roomForm from './components/roomForm.vue';
import certified from './components/certified.vue';
import moreList from './components/moreList.vue';
import labelList from './components/labelList.vue';
import coverList from './components/coverList.vue';
import setuproom from './components/setuproom.vue';
import closeRoom from './components/closeRoom.vue';
import openRoom from './components/openRoom.vue';
import {ElMessageBox} from "element-plus";
const initialQuery = {
  page: 1,
  limit: 20,
  room_uid: '',
  room_id: '',
  name: '',
  uuid: '',
  desc: '',
  notice: '',
  room_type: '',
  certified: 1,
  room_mode: '',
}
const roomFormRef = ref(),
certifiedRef = ref(),
moreListRef = ref(),
labelListRef = ref(),
coverListRef = ref(),
setuproomRef = ref(),
closeRoomRef = ref(),
openRoomRef = ref()
const action = reactive({
  total: 0,
  list: [] as Array<any>,
  roomTypeOptions: [] as Array<any>
})
const listQuery = reactive({...initialQuery})

const certifiedOptions = [
  { label: "未认证", value: 0 },
  { label: "已认证", value: 1 },
  { label: "整顿中", value: 2 },
]
provide('certifiedOptions',certifiedOptions)
const handleSerach = ()=>{
  listQuery.page = 1
  getList()
}
const resetQuery = () => {
  Object.assign(listQuery, {...initialQuery})
  getList()
}
const handleRoomForm = (row: any = {},formType='') => {
  roomFormRef.value.openDialog({
    ...row,
    roomTypeOptions:action.roomTypeOptions,
    formType
  })
}
const roommodeFilter = (room_mode = 0) => {
  const list = ['关闭房间','开启房间']
  return list[room_mode]
};
const handleRoomOpList = (row: any = {})=>{
  certifiedRef.value.openDialog(row)
}
const handleMore = (row: any = {}) => {
  moreListRef.value.openDialog(row)
}
const openDialog = (ref:any={},row:any={})=>{
  ref.openDialog(row)
}
const openDialog2 = (ref:any={},row:any={})=>{
  roomFormRef.value.openDialog({
    ...row
  })
  ref.openDialog(row)
}
const roomTypes = async()=>{
  const res = await guild_roomApi.getRoomType({ type: 1 })
  const { data=[] } = res
  action.roomTypeOptions = data;
}
const getList = async () => {
  const loading = Toastloading()
  const res = await guild_roomApi.getRooms(listQuery)
  loading.close()
  const { data = [], total = 0 } = res.data
  action.total = total
  action.list = data
}
onMounted(() => {
  getList()
  roomTypes()
})
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">房间UID：</div>
          <el-input v-model="listQuery.room_uid" placeholder="请输入房间UID" />
        </div>
        <div class="labelItem">
          <div class="label">房间ID：</div>
          <el-input v-model="listQuery.room_id" placeholder="请输入房间ID" />
        </div>
        <div class="labelItem">
          <div class="label">房间名：</div>
          <el-input v-model="listQuery.name" placeholder="请输入房间名" />
        </div>
        <div class="labelItem">
          <div class="label">房主UUID：</div>
          <el-input v-model="listQuery.uuid" placeholder="请输入房主UUID" />
        </div>
        <div class="labelItem">
          <div class="label">房间简介：</div>
          <el-input v-model="listQuery.desc" placeholder="请输入房间简介" />
        </div>
        <div class="labelItem">
          <div class="label">房间公告：</div>
          <el-input v-model="listQuery.notice" placeholder="请输入房间公告" />
        </div>
        <div class="labelItem">
          <div class="label">认证类型：</div>
          <el-select
          v-model="listQuery.room_type"
          clearable
          placeholder="请选择认证类型"
          @change="handleSerach">
            <el-option v-for="item in action.roomTypeOptions" :key="item.type_id" :label="item.type_name" :value="item.type_id" />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">认证状态：</div>
          <el-select
          v-model="listQuery.certified"
          clearable
          placeholder="请选择认证状态"
          @change="handleSerach">
            <el-option v-for="item in certifiedOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="labelBox">
        <el-button type="primary" @click="handleSerach">查询</el-button>
        <el-button type="primary" @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="handleRoomForm()">创建房间</el-button>
        <el-button type="primary" @click="openDialog(labelListRef)">房间标签</el-button>
        <el-button type="primary" @click="openDialog(coverListRef)">房间封面</el-button>
      </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column width="100" label="房间UID">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scope.row,'room_uid')"
          >{{ scope.row.room_uid }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" prop="room_id" label="房间ID" />
      <el-table-column width="100" prop="user.uuid" label="房主UUID" />
      <el-table-column show-overflow-tooltip min-width="200" label="房间名">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scope.row,'name')"
          >{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="200" show-overflow-tooltip prop="union_name" label="所属公会" />
      <el-table-column width="140" label="房间封面">
        <template #default="scope">
          <div class="roomImg relative">
            <xmImage :src="scope.row.image" :list="[scope.row.image]" />
            <div @click="handleRoomForm(scope.row,'image')" class="roomImgBut pointer">
              <el-tag>编辑</el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="140" label="房间壁纸">
        <template #default="scope">
          <div v-if="scope.row.background_pic" class="roomImg relative">
            <xmImage :src="scope.row.background_pic" :list="[scope.row.background_pic]" />
            <div @click="handleRoomForm(scope.row,'background_pic')" class="roomImgBut pointer">
              <el-tag>编辑</el-tag>
            </div>
          </div>
          <el-tag v-else @click="handleRoomForm(scope.row,'background_pic')" class="pointer">新增</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="90" label="认证类型">
        <template #default="scope">
          {{ scope.row.room_type?.type_name || '' }}
        </template>
      </el-table-column>
      <el-table-column width="90" label="是否认证">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomOpList(scope.row)"
          >{{ ["未认证", "已认证", "整顿中"][scope.row.certified] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="coefficient" label="预置厅分数">
        <template #default="scope">
          {{ scope.row.room_recommend?.coefficient || 0 }}
        </template>
      </el-table-column>
      <el-table-column width="90" prop="room_liang_type" label="靓号图标">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scope.row,'liang')"
          >{{ scope.row.room_liang_type ? '显示' : '隐藏' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip min-width="200" prop="notice" label="房间公告">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scope.row,'notice')"
          >{{ scope.row.notice }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip min-width="200" prop="desc" label="房间简介">
        <template #default="scope">
          <el-tag
          class="pointer"
          @click="handleRoomForm(scope.row,'desc')"
          >{{ scope.row.desc }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="240" fixed="right" label="操作">
        <template #default="scope">
          <el-row>
            <el-col class="xm-mb10" :span="24">
              <el-button type="primary" @click="handleRoomForm(scope.row)" >编辑房间</el-button>
              <el-button  v-if="scope.row.room_mode>0" prop="room_mode" type="danger" @click="openDialog(closeRoomRef,scope.row)" >关闭房间</el-button>
<!--              {{ scope.row.room_mode===0?"开启房间":"关闭房间" }}-->
              <el-button  v-else type="danger" @click="openDialog(openRoomRef,scope.row)" >开启房间</el-button>
            </el-col>
            <el-col :span="24">
              <el-button type="success" @click="openDialog(setuproomRef,scope.row)" >配置标签</el-button>
              <el-button type="primary" @click="handleMore(scope.row)" >更多功能</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <roomForm ref="roomFormRef" @update-list="getList" />
    <certified ref="certifiedRef" @update-list="getList" />
    <moreList ref="moreListRef" @update-list="getList" />
    <labelList ref="labelListRef" />
    <coverList ref="coverListRef" />
    <setuproom ref="setuproomRef" />
    <closeRoom ref="closeRoomRef" />
    <openRoom ref="openRoomRef" />
  </div>
</template>

